<template>
  <!-- 社会招聘 -->
  <div class="social">
    <div class="social_title clearfloat">
      <div class="title_text textName">職名</div>
      <div class="title_text">住所</div>
      <div class="title_text">ポジションタイプ</div>
      <div class="title_text">採用人数</div>
      <div class="title_text">詳しい</div>
    </div>
    <el-collapse accordion>
      <el-collapse-item v-for="(item,index) in list" :key="index">
        <template slot="title">
          <div class="title_span titleName">{{item.title}}</div>
          <div class="title_span">{{item.place}}</div>
          <div class="title_span">{{item.type}}</div>
          <div class="title_span">{{item.author}}</div>
          <!-- 查看详情 -->
          <div class="title_details1"></div>  
          
          <div class="title_details2">もっと</div>
        </template>
        <div class="social_content" v-html="item.content"></div>
        <div class="hiring" @click="onitem(index)">ジョブを適用</div>
      </el-collapse-item>
    </el-collapse>
    <el-pagination
    class="page"
      :page-size="10"
      :total="count"
      background
      layout="prev, pager, next"
      @current-change="pageSize"
    ></el-pagination>
    <el-dialog
      custom-class="dialog"
      :show-close="false"
      :visible.sync="dialogVisible"
      :center="true"
    >
      <div class='close_box'  @click="dialogVisible = false">
        <img  src="@/assets/images/closePopup.png" alt />
      </div>
      <div class="resume">
        <h6>個人の履歴書</h6>
        <div class="input_box">
          <div class="input_item">
            <span>名前</span>
            <input v-model="name" type="text" />
          </div>
          <div class="input_item">
            <span>お誕生日</span>
            <el-date-picker v-model="date_time"  type="date"  format="yyyy-MM-dd" placeholder="日付を選択"></el-date-picker>
          </div>
          <div class="input_item">
            <span>電話</span>
            <input v-model="tel" type="text" />
          </div>
          <div class="input_item">
            <span>稼働年</span>
            <input v-model="work_time" type="text" />
          </div>
          <div class="input_item">
            <span>お支払い希望</span>
            <input v-model="wage" type="text" />
          </div>
        </div>
        <div class="textarea">
          <span>個人的な利点</span>
          <textarea v-model="advantage" name="area"></textarea>
        </div>
        <div class="btns">
          <span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span>
          <div class="upload">
            <span v-if="!file_name">PDF履歴書をアップロード</span>
            <span v-else>実施する</span>
            <input accept=".pdf" type="file" id="file" multiple="multiple" @change="upFile($event)" />
          </div>
          <div class="submit" @click="submit">差し出す</div>
        </div>
        <div class="imgs">
          <img src="@/assets/images/resume_bg.png" alt />
        </div>
        <div class="ShutDown"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { job_cate, job_list, job_add } from "@/api/recruitment.js";
export default {
  data() {
    return {
         count: 0,
      dialogVisible: false, //提示框
      activeName: "1",
      cate: [{ title: null }, { title: null }],
      list: [],
      name: "", //姓名
      date_time: "", //出生日期
      tel: "", //手机
      work_time: "", //工作年限
      wage: "", //   期望薪资
      advantage: "" ,//个人优势
      file_name:null,
    };
  },
  mounted() {
    job_cate()
      .then(res => {
        this.cate = res.data.data.JAP;
        return job_list({ cid: this.cate[0].id, limit: 10, page: 1 });
      })
      .then(res => {
           this.count = res.data.count ;
            if (this.$isMobile()) {
          res.data.data.map(item => {
            item.content = this.$pxToRem(item.content);
          });
        }
        this.list = res.data.data;
      });
  },
    watch: {
    dialogVisible: {
      deep: true,
      handler: function(newValue, oldValue) {
         if(!newValue){
               console.log(newValue);
              this.file_name = null 
          }
      }
    }
  },
  methods: {
    //
    onitem(index) {
      this.dialogVisible = true;
      this.currentId = this.list[index].id;
    },
    // 上传pdf文件
    upFile(e) {
      // const loading = this.$loading({
      //   lock: false,
      //   text: "拼命加载中 ...",
      //   spinner: "el-icon-loading",
      //   background: "rgba(255, 255, 255,0)"
      // });
      console.log(e);
      let formData = new FormData();
      formData.append("file_input", e.target.files[0]);
     console.log(formData);
      axios({
        url: `${this.$store.state.headTitle.urlLink}/wapapi/art/savefile`,
          // url: `api/wapapi/art/savefile`,
        method: "post",
        data: formData,
        // headers: { "Content-Type": "multipart/form-data" }
      })
        .then(res => {
          // loading.close();  //结束loading
          if (res.data.sta == 1) {
            this.file_name = res.data.data;
            return this.$message({ message: "Uploaded successfully", type: "success" });
          } else {
            return this.$message({ message: res.msg, type: "error" });
          }
        })
        .catch(err => {
          console.log(err);
          // loading.close();
        });
    },
    //提交
    submit() {
    if (!this.name) {
        return this.$message({ message: "名前を入力してください", type: "error" });
      }
      if (!this.date_time) {
        return this.$message({ message: "生年月日を選択してください", type: "error" });
      }
      if (!this.tel) {
        return this.$message({ message: "携帯番号を入力してください", type: "error" });
      }
      if (!this.work_time) {
        return this.$message({ message: "勤続年数を入力してください", type: "error" });
      }
      if (!this.wage) {
        return this.$message({ message: "予想される給与を入力してください", type: "error" });
      }
      if (!this.advantage) {
        return this.$message({ message: "あなたの利点を入力してください", type: "error" });
      }
      if (!this.file_name) {
        return this.$message({ message: "PDF履歴書をアップロードしてください", type: "error" });
      }
      job_add({
        jid: this.currentId,
        year: this.work_time,
        file_input: `${this.$store.state.headTitle.urlLink}${this.file_name}`,
        birthday: this.date_time,
        name: this.name,
        mobile: this.tel,
        pay: this.wage,
        title: this.advantage
      }).then(res => {
        if (res.data.sta == 1) {
          return this.$message({ message: "配信再開が完了しました", type: "success" });
        } else {
          return this.$message({ message: res.data.meg, type: "error" });
        }
      });
    },
    // 加载列表
    getJob_list(page) {
      job_list({ cid: this.cate[0].id, limit: 10, page: page }).then(res => {
        if (res.data.data.length < 1) {
          this.$message("一時的に採用情報なし");
          setTimeout(() => {
            this.$router.go(-1);
          }, 2000);

          return this.$router.go(-1);
        }
         this.count = res.data.count ;
        this.list = res.data.data;
      });
    }
  }
};
</script>
<style scoped src="./sass/recruitment.css"></style>